<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
<body>
    <div class="box">
        我是广告
        <div class="box1">X</div>
      </div>
    
      <h2>显示</h2>
    
      <script>
        // 1. 获取事件源
    const btn =document.querySelector('.box1')
    
    
        //  2. 事件侦听
       btn.addEventListener('click', function(){
        document.querySelector('.box').style.display ='none'
       })
       document.querySelector('h2').addEventListener('click',function (){
        document.querySelector('.box').style.display ='block'
       })
    
    
      </script>
</body>
</html>